<!--
* description: 工单详情-召回/服务活动
-->
<template>
  <section class="editBigAreaInfo">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="召回/服务活动"
      :append-to-body="true"
      :visible.sync="popupsVisible"
      width="70%"
      @close="closed"
      @open="open"
    >
      <dialogHeader
        slot="title"
        title="召回/服务活动"
        :style-type="$store.state.app.dialogType"
      />
      <one-table-template
        ref="multipleTable"
        :dynamic-buttons="tableButtons"
        :dynamic-components="tableComponents"
        :dynamic-api-config="dynamicApiConfigs"
        :dynamic-table-cols="tableCols"
        :dynamic-form-fields="formField"
        :dynamic-is-show-select="false"
        :dynamic-is-init-table="true"
        :dynamic-is-fix-choose="false"
        :dynamic-is-fix-index="false"
        :dynamic-api-style="'restful'"
        :is-show-pagination="ture"
      />

    <!-- <div slot="footer" class="dialog-footer">
        <el-button
          v-for="comp in tableButtons"
          :key="comp.compKey"
          :type="comp.type"
          :icon="comp.icon"
          @click="comp.clickEvent"
        >{{ comp.text }}</el-button>
      </div> -->
    </el-dialog>
    <OrderDetails
      :dialog-visible="dialogVisible"
      :dynamic-edit-row-data="editRowData"
      :all-list="allList"
      @close="close"
      @toList="chooseToSon"
    />
  </section>
</template>
<script>
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { orgApis } from '@/api/paSparePartsManagement'

export default {
  name: 'RecallServiceActivit',
  components: {
    OneTableTemplate,
    OrderDetails: () => import('@/components/se/orderDetails/recallAndServiceActivity/recallAndServiceActivityDetails/recallAndServiceActivityDetails'),
    dialogHeader: () => import('@/components/dialogHeader')
  },

  // 组件混入对象
  mixins: [formMixins],

  props: {
    popupsVisible: { type: Boolean, default: false },
    // 从网格传入的编辑行数据(json)
    recallData: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    const viewPageCode = 'bigAreaInfo-edit'
    return {
      forward: {},
      dialogVisible: false,
      allList: false,
      editRowData: {},
      serviceActivityData: [],
      dynamicApiConfigs: orgApis.serviceActionQuery,
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'controlBtn',
              label: '操作', // 操作
              codeField: 'orgName',
              width: 100,
              disabled: true,
              align: 'center',
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey0',
                  align: 'center',
                  labelName: '选择',
                  codeField: 'orgName',
                  clickEvent: (index) => this.chooseList(index),
                  component: () => import('@/components/org/linkButton')
                }
              ]
            },
            {
              prop: 'vin',
              label: '活动编号',
              codeField: 'controlBtn',
              width: 150,
              align: 'center',
              isComponent: true,
              comps: [
                {
                  compKey: 'Vin1',
                  labelName: '333', // 编辑
                  align: 'center',
                  codeField: 'ACTION_CODE',
                  // clickEvent: (index) => this.edit(index),
                  component: () => import('@/components/org/linkButton')
                }
              ]
            },
            {
              prop: 'ACTION_NAME',
              label: '活动主题',
              align: 'center'
            },
            {
              prop: 'actionTypeName',
              label: '活动类型',
              align: 'center'
            },
            {
              prop: 'BEGIN_DATE',
              label: '活动开始时间',
              align: 'center'
            },
            {
              prop: 'END_DATE',
              label: '活动结束时间',
              align: 'center'
            }
          ],

      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '车牌号：',
              codeField: 'CAR_LICENSE',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: 'VIN码：',
              codeField: 'VIN',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey3',
              labelName: '车主姓名：',
              codeField: 'CUST_NAME',
              component: () =>
                import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            }
          ],
      tableButtons: [
        // {
        //   conmpKey: "btenKey1",
        //   type: "primary",
        //   size: "small",
        //   text: "选择",
        //   // clickEvent: () => this.queryTable(1),
        //   position: "right",
        // },
        {
          conmpKey: 'btenKey2',
          type: '',
          size: 'small',
          text: '取消',
          clickEvent: () => this.getBack(),
          position: 'right'
        }
      ],
      // 标题
      textMap: {
        edit: '价格策略信息编辑',
        add: '价格策略信息新增'
      },

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          CAR_LICENSE: '',
          VIN: '',
          CUST_NAME: ''
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    }
  },
  watch: {
    recallData: {
      immediate: true,
      handler(value) {
        this.formField = value
      }
    }
  },
  mounted() {
  },
  methods: {
    chooseToSon(event) {
      this.forward = event
      this.allList = false
      this.$emit('toForward', this.forward)
    },
    // 点击选择按钮
    chooseList(index) {
      this.editRowData = this.$utils.deepCopy(this.$refs['multipleTable'].list[index])
      this.serviceActivityData[0] = this.editRowData
      this.serviceActivityData.forEach(element => {
        element.actionCode = element.ACTION_CODE
        element.actionName = element.ACTION_NAME
        element.beginDate = element.BEGIN_DATE
        element.endDate = element.END_DATE
      })
      this.$emit('toServiceMain', this.serviceActivityData)
      this.allList = true
      this.popupsVisible = false
    },
    open() {
      this.$refs['multipleTable'].queryTable()
    },
    closed() {
      this.$emit('close')
      this.popupsVisible = false
      this.$emit('update:popupsVisible', false)
    },
    close() {
      this.dialogVisible = false
    },
    // 编辑获取数据
    // edit(index) {
    //   this.dialogVisible = true
    //   this.editPopupsState = 'edit'
    //   this.editRowData = this.$utils.deepCopy(this.$refs['multipleTable'].list[index])
    //   console.log(this.editRowData, 'this.editRowData')
    // },
    getBack() {
      // this.$router.go(-1)
      this.popupsVisible = false
    }
  }

}
</script>

<style lang="scss" scoped>
/deep/ .title-top{
  margin-top: 50px;
}
/deep/.el-table{
  height:auto !important;
  min-height: 500px;
}
/deep/.el-table__body-wrapper{
  height: auto;
  min-height: 500px;
}

 /deep/.el-table__row>td:nth-child(3) a{
  color: #333 !important;
}

.promptSpan {
  position: absolute;
  bottom: 26px;
  right: 335px;
  color: #e70020;
}
/deep/ .el-dialog__title {
  border-bottom: 0px !important;
  font: 20px bold !important;
}
</style>

